<template>
  <div>
    <hr>
    <h5>toRef组件 --- 定义响应式数据, 一般用于简单类型数据</h5>
    <p>name: {{ name }} | age: {{ age }}</p>
    <button @click="updateName">修改数据</button>
  </div>
</template>

<script>

import {ref} from "vue";

export default {


  name: "Ref",
  /**
   * ref函数, 常用于简单数据类型定义为响应式数据, 其实也可以定义复杂数据类型的响应式数据
   *    在修改值, 获取值的时候, 需要使用value属性
   *
   * 使用场景: 当你 `明确` 知道需要一个响应式数据对象, 那么就使用 reactive 即可
   *          其他情况使用 ref
   *
   * 注意: 看到ref, 叫JS中 取值 | 修改值 就要用value
   *        而在模板中使用ref声明的响应式数据, 可以省略.value
   */
  setup() {
    // 1.name数据
    const name = ref("springandme");
    // 2.age数据
    const age = ref(99);

    console.log("-------------------------------")
    console.log(name)
    console.log(age)

    const updateName = () => {
      name.value = 'llhuang10'
    }

    // 将来对定义 data 这个响应式数据是未知的,
    const data = ref(null)
    setTimeout(() => {
      // data.value = res.data
    }, 100)

    return {name, age, updateName}
  }
}
</script>

<style scoped>

</style>
